<template>
  <div class="wrapper">
    <img
      class="banner"
      :src="imgBaseUrl+dataList.pics"
      alt=""
    >
    <div class="bannerBt">
      <div class="left">
        <p>{{dataList.coin}} 积分</p>
        <p class="pt-4">￥<span>{{dataList.oPrice}}</span></p>
      </div>

      <p class="right">仅剩{{dataList.limitNum}}件</p>
    </div>
    <div class="content">
      <p class="conOne">{{dataList.title}}</p>
      <p class="conTwo">{{dataList.subTitle}}</p>
    </div>

    <!--中间tabbar  -->
    <div class="tabWrapper">
      <div
        class="tabItem"
        :class="{'actBor':isPicDetail,'bor':!isPicDetail}"
        data-type="1"
        @click="tabChange(1)"
      >
        <p :class="{'actText':isPicDetail,'text':!isPicDetail}">图文详情</p>
      </div>
      <div
        class="tabItem"
        :class="{'actBor':isUseNotice,'bor':!isUseNotice}"
        data-type="2"
        @click="tabChange(2)"
      >
        <p :class="{'actText':isUseNotice,'text':!isUseNotice}">使用须知</p>
      </div>
    </div>

    <!-- 图文详情 -->
    <div
      class="picDetail"
      v-if="isPicDetail"
      v-html="dataList.detail"
    ></div>

    <!-- 使用须知 -->
    <div
      class="picDetail"
      v-if="isUseNotice"
      v-html="dataList.notice"
    >使用须知</div>

    <!-- 底部按钮 -->
    <button
      class="btn"
      v-if="currentNum>=dataList.coin && !areadySpike"
      @click="noEnoughCoin()"
    >{{dataList.coin}}积分立即秒杀</button>

    <button
      class="btnGray"
      v-if="currentNum<dataList.coin || areadySpike"
      @click="noEnoughCoin()"
    >
      <p v-text="currentNum<dataList.coin?'积分不足':'您已秒杀过'"></p>
      <p class="font-35">（我的积分：{{currentNum}}）</p>
    </button>
  </div>
</template>
<script>
import { imgBaseUrl } from '@/config/env.js';
import { Toast } from 'vant';
export default {
  data() {
    return {
      imgBaseUrl,
      isPicDetail: false, // 秒杀商品开关
      isUseNotice: false, // 我的商品开关
      isRed: false, // 按钮红
      isGray: true, // 按钮灰色
      id: '',
      dataList: {},
      userInfo: '',
      currentNum: '', // 我的积分
      isAuth: '',
      areadySpike: false // 已秒杀开关
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getData();
    this.currentUserInfo();
    this.tabChange(1);
    this.isCanExchange();
  },
  methods: {
    // 获取数据
    getData() {
      this.$http
        .post('spikeProduct/detail', { id: this.id.toString() })
        .then(res => {
          console.log(res);
          if (res.data.code === '0' && res.data.object) {
            this.dataList = res.data.object;
            console.log(this.dataList);
          }
        });
    },

    // 获取用户信息
    currentUserInfo() {
      this.$http.post('/tuser/userInfo', {}).then(res => {
        if (res) {
          if (res.data.code === '0') {
            this.userInfo = res.data.object;
            this.currentNum = res.data.object.coinAmount;
            this.isAuth = res.data.object.isAuth;
          } else {
            window.history.go(-1);
          }
        }
      });
    },

    // 积分不足按钮
    noEnoughCoin() {
      Toast('积分不足哦~');
      this.$http
        .post('/spikeProduct/exchange', { productId: this.id.toString() })
        .then(res => {
          if (res.data.code === '0') {
            this.isCanExchange();
            this.$router.push('/success');
          } else {
            Toast(res.data.message);
          }
        });
    },

    // 判断是否已经兑换
    isCanExchange() {
      this.$http
        .post('/spikeProduct/isCanExchange', { productId: this.id.toString() })
        .then(res => {
          console.log('已经兑换', res.data.code);
          console.log('已经兑换', res && res.data.code === '1');
          if (res && res.data.code === '1') {
            this.areadySpike = true;
            console.log('已经兑换', this.areadySpike);
          } else {
            this.areadySpike = false;
          }
        });
    },

    tabChange(e) {
      if (e === 1) {
        this.isPicDetail = true;
        this.isUseNotice = false;
      } else if (e === 2) {
        this.isUseNotice = true;
        this.isPicDetail = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
}
.bannerBt {
  width: 100%;
  height: 1.33rem;
  background-color: #fa1c1c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
  color: #ffffff;
  .left {
    font-size: 0.61rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .pt-4 {
      font-size: 0.33rem;
      padding-top: 0.4rem;
      span {
        text-decoration: line-through;
      }
    }
  }
  .right {
    font-size: 0.37rem;
    // color: #ffffff;
  }
}
.content {
  padding: 0.4rem;
  background-color: #fff;
  .conOne {
    font-size: 0.4rem;
    color: #050507;
  }
  .conTwo {
    font-size: 0.35rem;
    color: #939393;
  }
}

// 中间tabbar
.tabWrapper {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 100%;
  // height: 1.33rem;
  background-color: #ffffff;
  margin-top: 0.4rem;
  font-size: 0.43rem;

  .tabItem {
    width: 50%;
    border-right: 1px solid #cccccc;
    height: 1.33rem;
    padding-top: 0.4rem;
    img {
      width: 0.54rem;
      height: 0.54rem;
      margin-right: 0.1rem;
    }
    p {
      display: inline-block;
      font-size: 0.4rem;
    }
  }
}

.Text {
  color: #3b3a3a;
}
.actText {
  color: #28b46a;
}
.bor {
  border-bottom: 1px solid #cccccc;
}
.actBor {
  border-bottom: 1px solid #28b46a;
}

.btn {
  width: 100%;
  height: 1.17rem;
  background-color: #fa1c1c;
  font-size: 0.4rem;
  color: #fafafb;
  border: none;
  position: fixed;
  bottom: 0;
}
.btnGray {
  width: 100%;
  height: 1.17rem;
  background-color: #b7b6b7;
  font-size: 0.4rem;
  color: #fafafb;
  border: none;
  position: fixed;
  bottom: 0;
  .font-35 {
    font-size: 0.35rem;
  }
}
.picDetail {
  padding: 0.4rem 0.4rem 2rem;
  // background-color: #fff;
}
</style>